/*
 * @Author: xiaosihan 
 * @Date: 2023-08-05 22:53:43 
 * @Last Modified by: xiehangyun
 * @Last Modified time: 2025-02-22 10:30:33
 */


import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./centerEditor.module.less";
import editorStore from "@/editorComponent/editorStore";
import designEditor from "@/editorComponent/designEditor";
import ColorPickCanvas from "./ColorPickCanvas/ColorPickCanvas";
import Graffiti from "../RightMenu/ToolGraffiti/Graffiti/Graffiti";

interface Iprops {
  onMouseLeave: () => void;
}

// 中间的编辑器
export default function CenterEditor(props: Iprops) {

  const dom = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (dom.current) {
      designEditor.setContainer(dom.current);
    }
  }, []);

  useEffect(() => autorun(() => {
    if (dom.current) {
      dom.current.style.transform = `translate(calc(-50%),  calc( -50% + 56px) ) scale(${editorStore.scale / 100})`;
      // dom.current.style.transform = `translate(calc(0%), 0%) scale(1)`;
    }
  }, { delay: 30 }), []);

  return (
    <div
      onMouseLeave={props.onMouseLeave}
      className={styles.centerEditor}
    >
      <div ref={dom} className={styles.editorContainer} ></div>
      <ColorPickCanvas />
      {/* 涂鸦画布组件 */}
      <Graffiti />
    </div>
  );

}